<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名： {{person.name}}</h2>
    <h2>年龄： {{person.age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改Person</button>
  </div>

</template>

<script setup lang="ts" name="Person">
 import {reactive,watch} from 'vue'
 let person = reactive({
   name: 'zhangsan',
   age:18
 })
 // 方法
 function changeName () {
   person.name += '~'
 }
 function changeAge () {
   person.age += 1
 }
 function changePerson () {
    Object.assign(person,{name:'Jeff',age:25})
 }
 //监视 情况三：监视【reactive】定义的【对象类型】数据 默认开启深度监视
 watch(person,(newValue,oldValue)=>{
   console.log('person发生变化',newValue,oldValue)
 })


</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>